<template>
  <div class="blacklist-bg">
    <el-card class="blacklist-card">
      <div class="blacklist-title">黑名单管理</div>
      <el-divider />
      <div class="blacklist-actions">
        <el-button type="primary" @click="onAddDialog">添加黑名单</el-button>
        <el-button @click="gomy">返回</el-button>
      </div>
      <el-table :data="blacklist" style="margin-top: 20px;">
        <el-table-column prop="target_user" label="被拉黑用户ID" />
        <el-table-column prop="black_type" label="类型">
          <template #default="scope">
            {{ scope.row.black_type === 1 ? '车主' : '乘客' }}
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="原因" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="editBlacklist(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteBlacklist(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增/编辑弹窗 -->
      <el-dialog v-model="showAddDialog" title="黑名单信息">
        <el-form :model="editForm" label-width="80px">
          <el-form-item label="用户">
            <el-select v-model="editForm.target_user" filterable placeholder="请选择乘客用户">
              <el-option v-for="user in passengerUsers" :key="user.id" :label="user.real_name" :value="user.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="原因"><el-input v-model="editForm.reason" /></el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="saveBlacklist">保存</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive} from 'vue'
import { http } from '@/utils/request'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const blacklist = ref([])
const showAddDialog = ref(false)
const editForm = ref({ id: null, target_user: '', black_type: 0, reason: '' })
const passengerUsers = ref([])
function onAddDialog(){
  editForm.value = { id: null, target_user: '', black_type: 0, reason: '' } // black_type写死为0（乘客）
  showAddDialog.value = true
}
function fetchBlacklist() {
  const userId = localStorage.getItem('userid')
  http.get(`/login/user_blacklist/?user_id=${userId}`).then(res => {
    if (res.data && res.data.data) {
      blacklist.value = res.data.data
    }
  })
}
function editBlacklist(row) {
  Object.assign(editForm.value, row)
  editForm.value.black_type = 0 // 编辑时也写死为乘客
  showAddDialog.value = true
}
function saveBlacklist() {
  if (editForm.value.id) {
    // 编辑时
    const payload = {
      id: editForm.value.id,
      black_type: editForm.value.black_type,
      reason: editForm.value.reason,
      user_id: localStorage.getItem('userid')
    }
    http.put(`/login/user_blacklist/`, payload).then(() => {
      ElMessage.success('修改成功')
      showAddDialog.value = false
      fetchBlacklist()
    })
  } else {
    // 新增时
    const payload = {
      user_id: localStorage.getItem('userid'),
      target_user_id: editForm.value.target_user,
      black_type: editForm.value.black_type,
      reason: editForm.value.reason
    }
    http.post('/login/user_blacklist/', payload).then(() => {
      ElMessage.success('添加成功')
      showAddDialog.value = false
      fetchBlacklist()
    })
  }
}
function deleteBlacklist(id) {
  http.delete(`/login/user_blacklist/?id=${id}`).then(() => {
    ElMessage.success('删除成功')
    fetchBlacklist()
  })
}
function gomy() {
  router.push('/')
}
onMounted(() => {
  fetchBlacklist()
  // 获取所有乘客用户
  http.get('/login/users/', { params: { type: 0 } }).then(res => {
    if (res.data && res.data.data) {
      passengerUsers.value = res.data.data
    }
  })
})
</script>

<style scoped>
.blacklist-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #fff 60%, #ffe5cc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blacklist-card {
  width: 800px;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(34,34,34,0.08);
  padding: 32px 36px 24px 36px;
}
.blacklist-title {
  font-size: 26px;
  font-weight: bold;
  color: #222;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.blacklist-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
</style> 